<div class="debugger-panel" [class.visible]="visible">
  <div class="panel-header">
    <h4>调试器</h4>
    <button class="close-btn" (click)="close()">×</button>
  </div>

  <div class="panel-content">
    <!-- 调试控制按钮 -->
    <div class="debug-controls">
      <button 
        class="debug-btn continue" 
        [disabled]="!canExecuteDebugAction || isRunning"
        (click)="continue()"
        title="继续 (F5)">
        ▶️
      </button>
      
      <button 
        class="debug-btn step-over" 
        [disabled]="!canExecuteDebugAction || isRunning"
        (click)="stepOver()"
        title="步过 (F10)">
        ⤴️
      </button>
      
      <button 
        class="debug-btn step-into" 
        [disabled]="!canExecuteDebugAction || isRunning"
        (click)="stepInto()"
        title="步入 (F11)">
        ⤵️
      </button>
      
      <button 
        class="debug-btn step-out" 
        [disabled]="!canExecuteDebugAction || isRunning"
        (click)="stepOut()"
        title="步出 (Shift+F11)">
        ⤴️
      </button>
      
      <button 
        class="debug-btn pause" 
        [disabled]="!canExecuteDebugAction || !isRunning"
        (click)="pause()"
        title="暂停">
        ⏸️
      </button>
      
      <button 
        class="debug-btn terminate" 
        [disabled]="!canExecuteDebugAction"
        (click)="terminate()"
        title="停止 (Shift+F5)">
        ⏹️
      </button>
    </div>

    <!-- 调试信息区域 -->
    <div class="debug-info" *ngIf="currentSession">
      <div class="session-status">
        <span class="status-label">状态:</span>
        <span class="status-value" [class]="currentSession.state">{{ currentSession.state }}</span>
        <span *ngIf="currentSession.currentLine" class="current-line">
          第 {{ currentSession.currentLine }} 行
        </span>
      </div>
    </div>

    <!-- 标签页 -->
    <div class="debug-tabs">
      <div class="tab-headers">
        <button 
          class="tab-header" 
          [class.active]="activeTab === 'variables'"
          (click)="switchTab('variables')">变量</button>
        <button 
          class="tab-header" 
          [class.active]="activeTab === 'watch'"
          (click)="switchTab('watch')">监视</button>
        <button 
          class="tab-header" 
          [class.active]="activeTab === 'callstack'"
          (click)="switchTab('callstack')">调用栈</button>
        <button 
          class="tab-header" 
          [class.active]="activeTab === 'breakpoints'"
          (click)="switchTab('breakpoints')">断点</button>
        <button 
          class="tab-header" 
          [class.active]="activeTab === 'output'"
          (click)="switchTab('output')">输出</button>
      </div>

      <!-- 变量面板 -->
      <div class="tab-content variables-panel" *ngIf="activeTab === 'variables'">
        <div class="section-header">
          <h5>变量</h5>
          <button class="refresh-btn" (click)="refreshWatchExpressions()" title="刷新">🔄</button>
        </div>
        
        <div class="variables-list" *ngIf="currentSession?.variables">
          <div 
            class="variable-item" 
            *ngFor="let variable of currentSession?.variables"
            [class.expandable]="variable.children && variable.children.length > 0">
            
            <div class="variable-header" (click)="toggleVariable(variable)">
              <span class="expand-icon" *ngIf="variable.children && variable.children.length > 0">
                {{ variable.expanded ? '▼' : '▶' }}
              </span>
              <span class="variable-name">{{ variable.name }}</span>
              <span class="variable-type">{{ variable.type }}</span>
              <span class="variable-value">{{ variable.value }}</span>
            </div>
            
            <div class="variable-children" *ngIf="variable.expanded && variable.children">
              <div 
                class="variable-item child" 
                *ngFor="let child of variable.children">
                <span class="variable-name">{{ child.name }}</span>
                <span class="variable-type">{{ child.type }}</span>
                <span class="variable-value">{{ child.value }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="empty-state" *ngIf="!currentSession?.variables || currentSession?.variables?.length === 0">
          <p>没有可用的变量信息</p>
        </div>
      </div>

      <!-- 监视面板 -->
      <div class="tab-content watch-panel" *ngIf="activeTab === 'watch'">
        <div class="section-header">
          <h5>监视</h5>
        </div>
        
        <div class="watch-input">
          <input 
            type="text" 
            [(ngModel)]="newWatchExpression" 
            placeholder="输入表达式..."
            (keyup.enter)="addWatchExpression()">
          <button (click)="addWatchExpression()">添加</button>
        </div>
        
        <div class="watch-list">
          <div 
            class="watch-item" 
            *ngFor="let watch of watchExpressions">
            <div class="watch-expression">{{ watch.expression }}</div>
            <div class="watch-value" *ngIf="watch.value">{{ watch.value }}</div>
            <div class="watch-error" *ngIf="watch.error">错误: {{ watch.error }}</div>
            <button class="remove-btn" (click)="removeWatchExpression(watch.id)">×</button>
          </div>
        </div>
      </div>

      <!-- 调用栈面板 -->
      <div class="tab-content callstack-panel" *ngIf="activeTab === 'callstack'">
        <div class="section-header">
          <h5>调用栈</h5>
        </div>
        
        <div class="stack-list" *ngIf="currentSession?.stackFrames">
          <div 
            class="stack-item" 
            *ngFor="let frame of currentSession?.stackFrames">
            <div class="frame-name">{{ frame.name }}</div>
            <div class="frame-location">{{ frame.source }}:{{ frame.line }}</div>
          </div>
        </div>
        
        <div class="empty-state" *ngIf="!currentSession?.stackFrames || currentSession?.stackFrames?.length === 0">
          <p>没有调用栈信息</p>
        </div>
      </div>

      <!-- 断点面板 -->
      <div class="tab-content breakpoints-panel" *ngIf="activeTab === 'breakpoints'">
        <div class="section-header">
          <h5>断点</h5>
        </div>
        
        <div class="breakpoints-list" *ngIf="currentSession?.breakpoints">
          <div 
            class="breakpoint-item" 
            *ngFor="let breakpoint of currentSession?.breakpoints"
            [class.disabled]="!breakpoint.enabled"
            [class.unverified]="!breakpoint.verified">
            
            <div class="breakpoint-info">
              <span class="breakpoint-type">{{ breakpoint.type }}</span>
              <span class="breakpoint-line">第 {{ breakpoint.line }} 行</span>
              <span class="breakpoint-condition" *ngIf="breakpoint.condition">
                条件: {{ breakpoint.condition }}
              </span>
              <span class="breakpoint-log" *ngIf="breakpoint.logMessage">
                日志: {{ breakpoint.logMessage }}
              </span>
            </div>
            
            <div class="breakpoint-actions">
              <button 
                class="toggle-btn" 
                (click)="toggleBreakpoint(breakpoint)"
                [title]="breakpoint.enabled ? '禁用' : '启用'">
                {{ breakpoint.enabled ? '🔴' : '⚪' }}
              </button>
              <button 
                class="remove-btn" 
                (click)="removeBreakpoint(breakpoint)"
                title="删除">
                ×
              </button>
            </div>
          </div>
        </div>
        
        <div class="empty-state" *ngIf="!currentSession?.breakpoints || currentSession?.breakpoints?.length === 0">
          <p>没有设置断点</p>
        </div>
      </div>

      <!-- 输出面板 -->
      <div class="tab-content output-panel" *ngIf="activeTab === 'output'">
        <div class="section-header">
          <h5>调试输出</h5>
          <button class="clear-btn" (click)="clearOutput()">清空</button>
        </div>
        
        <div class="output-content">
          <div class="output-line" *ngFor="let line of debugOutput">{{ line }}</div>
        </div>
      </div>
    </div>
  </div>
</div> 